<template>
  <div class="singerBox">
    <div class="condition">
      <div class="area">
        <span class="areaTitle">地区:</span>
        <navBar
          :hotTagList="areaList"
          :top="topArea"
          @updataHotTagTop="updataHotTagTop"
        ></navBar>
      </div>
      <div class="area">
        <span class="areaTitle">类型:</span>
        <navBar
          :hotTagList="typeList"
          :top="topType"
          @updataHotTagTop="updataHotTagTop"
        ></navBar>
      </div>
      <div class="area">
        <span class="areaTitle">排序:</span>
        <navBar
          :hotTagList="orderList"
          :top="topCondition"
          @updataHotTagTop="updataHotTagTop"
        ></navBar>
      </div>
    </div>
    <div class="singerList">
      <!-- <songItem
        v-for="(item, index) in singerList"
        :key="index"
        :itemData="item"
        @routerClick="routerClick"
      ></songItem> -->
      <MvCardItem
        :mvList="mvList"
        @clickMvItem="clickMvItem"
        @bottomLoad="bottomLoad"
        :videoType="'mv'"
        :isLoad="true"
      ></MvCardItem>

      <!-- <el-backtop target=".singerList"></el-backtop> -->
    </div>
  </div>
</template>
<script>
import navBar from '@/views/Discover/disCoverChildren/musicListChildren/components/navBar.vue'
import MvCardItem from '@/views/singerDetail/components/MvCardItem.vue'
import { getMvList } from '@/api/video/video'
export default {
  name: 'singerPage',
  data() {
    return {
      // mv 地区
      areaList: [
        { name: '全部地区', path: '' },
        { name: '内地', path: '内地' },
        { name: '港台', path: '港台' },
        { name: '欧美', path: '欧美' },
        { name: '日本', path: '日本' },
        { name: '韩国', path: '韩国' }
      ],
      topArea: { name: '全部地区' },
      // mv 类型
      typeList: [
        { name: '全部类型', path: '' },
        { name: '官方版', path: '官方版' },
        { name: '原生', path: '原生' },
        { name: '现场版', path: '现场版' },
        { name: '网易出品', path: '网易出品' }
      ],
      topType: { name: '全部类型' },
      // 排序
      orderList: [
        { name: '上升最快', path: '' },
        { name: '最热', path: '最热' },
        { name: '最新', path: '最新' }
      ],
      topCondition: { name: '上升最快' },
      // 请求数据
      area: '',
      type: '',
      // 当前排序
      order: '',
      // 当前视频页数
      mvPage: 1,
      // 是否还有更多视频数据
      isMore: false,
      // 视频列表数据
      mvList: []
    }
  },
  components: {
    navBar,
    MvCardItem
  },
  created() {
    this.getMvList()
  },
  methods: {
    // 筛选条件回调
    updataHotTagTop(item, index) {
      console.log(item, index, 'aaa')
      if (this.areaList.find((key) => key.name === item.name)) {
        this.topArea = item
        this.area = this.areaList[index].path
        this.mvList = []
        this.mvPage = 1
        this.getMvList()
      } else if (this.typeList.find((key) => key.name === item.name)) {
        this.topType = item
        console.log(this.topType, item, 'asd')
        this.type = this.typeList[index].path
        this.mvList = []
        this.mvPage = 1
        this.getMvList()
      } else if (this.orderList.find((key) => key.name === item.name)) {
        this.topCondition = item
        this.order = this.orderList[index].path
        this.mvList = []
        this.mvPage = 1
        this.getMvList()
      }
    },
    //获取全部mv
    async getMvList() {
      try {
        let res = await getMvList({
          area: this.area,
          type: this.type,
          order: this.order,
          offset: 30 * (this.mvPage - 1)
        })
        this.isMore = res.data.hasMore
        this.mvList.push(...res.data.data)
        // console.log(this.mvList)
      } catch (error) {
        console.error('原生有问题，请跳过')
      }
    },
    // 上拉触底的回调
    bottomLoad() {
      // console.log(123)
      if (this.isMore) {
        this.mvPage += 1
        this.getMvList()
      }
    },
    // 跳转mv
    clickMvItem(id) {
      if (!this.$store.state.isLogin) {
        this.$message.error('登录后才能观看MV哦!')
        return
      }
      // console.log(id, index, type)
      this.$router.push({
        path: '/index/VideoDetail',
        query: { id, type: 'mv' }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.singerBox {
  width: 100%;
  margin: 0 auto;
  margin-top: 20px;
  padding-left: 20px;
}
.area {
  display: flex;
  align-content: center;
  // justify-content: center;
  margin-bottom: 15px;
  .areaTitle {
    line-height: 27px;
    margin-right: 10px;
    color: #666;
  }
}
.condition {
  margin-bottom: 30px;
}
// .singerList {
//   display: flex;
//   flex-wrap: wrap;
//   height: calc(100vh - 376px);
//   overflow-y: scroll;
//   padding-left: 20px;
//   padding-top: 20px;
//   .songItem {
//     width: 224px;
//     margin-right: 20px;
//     margin-bottom: 20px;
//     text-align: center;
//     cursor: pointer;
//     &:nth-child(5n) {
//       margin-right: 0;
//     }
//   }
// }
</style>
